<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>XBUI小兵科技开发规范</title>

    <meta content="all" name="robots"/>
    <meta name="keywords" content="XBUI,前端,成都网站建设,小程序,APP"/>
    <meta name="description" content="XBUI小兵科技开发规范"/>
    <meta name="author" content="龙兵科技">
    <meta name="copyright" content="龙兵科技"/>

    <!--favicon-->
    <link href="favicon.ico" rel="bookmark" type="image/x-icon" />
    <link href="favicon.ico" rel="icon" type="image/x-icon" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <!-- //favicon -->

    <noscript>你的浏览器已禁用javascript，请启用javascript，否则网页将非正常运行！</noscript>

    <script src="js/jquery-1.11.3.min.js"></script>
    <!--zui bootcss lib-->
    <link rel="stylesheet" href="css/zui/css/zui.min.css">
    <script type="text/javascript" src="css/zui/js/zui.min.js"></script>
    <!--//zui bootcss lib-->

    <!--highlight-->
    <link rel="stylesheet" href="css/zui/lib/prettify/prettify.css">
    <script src="css/zui/lib/prettify/prettify.js"></script>

    <!--custom-->
    <link rel="stylesheet" href="css/xbui.base.css">
    <link rel="stylesheet" href="css/docs.css">
    <link rel="stylesheet" href="css/xbui.main.css">
    <script src="js/xbui.common.plugin.js"></script>
    <script src="js/xbui.common.run.js"></script>
</head>

<body data-spy="scroll" data-target="#docs-navbar" data-offset="200">
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div id="docs-navbar" data-spy="affix" class="affix">
                <div class="row">
                    <div class="span2">
                        <ul class="nav nav-pills nav-stacked" role="tablist">
                            <li><a href="#">前言</a></li>
                            <li class="active"><a href="#section1">全局结构</a></li>
                            <li><a href="#section2">导航</a></li>
                            <li><a href="#section2">数据列表</a></li>
                            <li><a href="#section3">图片缓加载</a></li>
                            <li><a href="#section4">swiper</a></li>
                            <li><a href="#">SuperSlide</a></li>
                            <li><a href="#">响应式前端开发</a></li>

                        </ul>
                        <div style="margin-top: 20px;">
                            <script src='//gitee.com/sky135/XBUI/star_widget_preview'></script>
                        </div>

                        <br>


                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10">

            <!-- demo begin -->
            <h1 id="section1"><a href="#section1 " name="section1" id="section1">网页主要结构</a></h1>
            <hr>
            <div class="xb-editor">
                文档类型、标题、三大标签、icon、页头、主题、内容、页尾
            </div>
            <pre class="prettyprint linenums lang-html pre-scrollable">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>XBUI小兵科技开发规范</title>

    <meta content="all" name="robots"/>
    <meta name="keywords" content="XBUI,前端,成都网站建设,小程序,APP"/>
    <meta name="description" content="XBUI小兵科技开发规范"/>
    <meta name="author" content="龙兵科技">
    <meta name="copyright" content="龙兵科技"/>

    <!--favicon-->
    <link href="favicon.ico" rel="bookmark" type="image/x-icon" />
    <link href="favicon.ico" rel="icon" type="image/x-icon" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <!-- //favicon -->

    <noscript>你的浏览器已禁用javascript，请启用javascript，否则网页将非正常运行！</noscript>

    <script src="js/jquery-1.11.3.min.js"></script>

    <!--zui bootcss lib-->
    <link rel="stylesheet" href="css/zui/css/zui.lite.min.css">
    <script src="css/zui/js/zui.lite.min.js"></script>
    <!--//zui bootcss lib-->

    <!--custom-->
    <link rel="stylesheet" href="css/xbui.main.css">
    <script src="js/xbui.common.plugin.js"></script>
    <script src="js/xbui.common.run.js"></script>
&lt;/head&gt;
&lt;body&gt;

 <!--[if lt IE 8]>
  <div class="alert alert-danger">您的浏览器版本过低，无法体验所有功能，建议升级或者更换浏览器。 <a href="http://browsehappy.com/">更换一个更好的浏览器</a></div>
  <![endif]-->

  <!-- 外套 -->
  <div class="layout">
      <div class="wrapper" id="wrapper">
          <div class="page-container w-p100">
              <!-- 页头 001-->
              <header class="header xb-mod-header-001">
                  <div class="headerWrap">
                      这里放页头
                  </div>
              </header>

              <!-- 通用幻灯片 -->
              <div class="full-slide">
                  如果是首页这个地方放幻灯片
              </div>

              <!-- 主体 -->
              <div class="main">
                  <div class="mainwrap">
                      这是放内容
                  </div>
              </div>
              <!-- 页尾 -->
              <footer class="footer">
                  <div class="footerWrap">
                      这里放页面尾部
                  </div>
              </footer>
          </div>
      </div>
  </div>

&lt;/body&gt;
&lt;/html&gt;
            </pre>

            <h1 id="section2"><a href="#section2" name="section2" id="section2">数据列表</a></h1>

            <hr>

            <div class="xb-list list-space list-space-10 list-data" role="datalist" data-toggle="fade" data-cell=".list-item" data-mask=".item-layer">
                <ul class="row">
                    <li class="col-xs-6 col-md-6 list-item">
                        <div class="inner-wrap">
                            <a href="#" class="item-media block">
                                <img src="https://fakeimg.pl/350x200/">
                                <div class="item-layer">
                                    <div class="icon">
                                        查看
                                    </div>
                                </div>
                            </a>
                            <div class="item-content">
                                <a href="#" class="title">数据标题</a>
                                <div class="desc">
                                    xbui采用MIT开源协议，将会永久性提供无偿服务。
                                </div>
                                <time class="time">2017/2/20</time>
                            </div>
                        </div>
                    </li>
                    <li class="col-xs-6 col-md-6 list-item">
                        <div class="inner-wrap">
                            <a href="#" class="item-media block">
                                <img src="https://fakeimg.pl/350x200/">
                                <div class="item-layer">
                                    <div class="icon">
                                        查看
                                    </div>
                                </div>
                            </a>
                            <div class="item-content">
                                <a href="#" class="title">数据标题</a>
                                <div class="desc">
                                    xbui采用MIT开源协议，将会永久性提供无偿服务。
                                </div>
                                <time class="time">2017/2/20</time>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>

            <div class="xb-editor">
                <p>通用数据列表可以更具实际项目情况更改结构和定义样式</p>
                <p>基础库xb-list 另起类名自定义样式  </p>
            </div>

            <!--数据列表-->
            <pre class="prettyprint lang-html linenums pre-scrollable">
<div class="xb-list list-data"  role="datalist" data-toggle="fade" data-cell=".list-item" data-mask=".item-layer">
    <ul class="row">
        <li class="list-item">
        <div class="inner-wrap">
            <a href="https://fakeimg.pl/350x200/" class="item-media block">
                <img src="">
                <div class="item-layer">
                    <div class="icon">
                                      查看
                    </div>
                </div>
            </a>
            <div class="item-content">
                <a href="#" class="title">数据列表</a>
                <div class="desc">
                    响应式数据列表客兼容pc端移动端
                </div>
                <time class="time">2018/2/20</time>
            </div>
        </div>
        </li>
     </ul>
</div>
            </pre>

            <h3>设置数据列表的基础事件绑定和交互</h3>
            <pre class="prettyprint lang-html linenums pre-scrollable">
 <!--引入xbui公共插件-->
<link rel="stylesheet" href="css/xbui.base.css">
<script src="js/xbui.common.plugin.js"></script>
role="datalist"  角色
data-toggle="fade"  特效
data-cell=".list-item" 触发事件的元素
data-mask=".item-layer" 遮罩
<div class="xb-list list-data"  role="datalist" data-toggle="fade" data-cell=".list-item" data-mask=".item-layer"></div>
            </pre>
            <!-- demo end -->

            <div class="footer">
                XBUI小兵团队前端开发规范2017-2018
                <script src='//gitee.com/sky135/XBUI/widget_preview_fix'></script>
            </div>

        </div>
    </div>
</div>


<script>

    $(document).ready(function () {

        // 页面导入 prettify.js 后调用 window.prettyPrint 方法来初始化代码高亮效果
        var $pr = $('.prettyprint');
        $pr.each(function (i, dom) {
            var _self = $(this),
                $html = _self.html()
            ;
            if (_self.hasClass('lang-html')) {
                $html = htmlEscape(_self.html());
                _self.html($html);
            }
        })

        function htmlEscape(s) {
            return s
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }

        window.prettyPrint();
    });
</script>

</body>

</html>
